<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线单词抽背小测验</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
    }
    .container {
      display: inline-block;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background-color: #f9f9f9;
    }
    .question {
      font-size: 24px;
      margin-bottom: 20px;
    }
    .answer {
      font-size: 18px;
      padding: 10px;
      width: 200px;
      margin-bottom: 20px;
    }
    .submit-btn {
      padding: 10px 20px;
      font-size: 18px;
      cursor: pointer;
    }
    .result {
      margin-top: 20px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Are You Ready？ Good Luck!</h1>
    <div class="question" id="question"></div>
    <input type="text" class="answer" id="answer" placeholder="请输入答案">
    <button class="submit-btn" id="submit-btn" onclick="checkAnswer()">提交</button>
    <div class="result" id="result"></div>
  </div>

  <script>
    // 单词库
    const words = [
      { english: "apple", chinese: "苹果" },
      { english: "banana", chinese: "香蕉" },
      { english: "cat", chinese: "猫" },
      { english: "dog", chinese: "狗" },
      { english: "elephant", chinese: "大象" },
    ];

    let remainingWords = [...words]; // 剩余的单词
    let currentWord; // 当前单词
    let isEnglishToChinese = true; // 出题模式：true为英译汉，false为汉译英
    let score = 0; // 用户得分

    // 初始化，随机出题
    function init() {
      if (remainingWords.length === 0) {
        // 如果所有单词都考完了，显示最终成绩
        document.getElementById("question").textContent = "考试结束！";
        document.getElementById("answer").style.display = "none";
        document.getElementById("submit-btn").style.display = "none";
        document.getElementById("result").textContent = `你的最终得分是：${score}/${words.length}`;
        return;
      }

      const randomIndex = Math.floor(Math.random() * remainingWords.length);
      currentWord = remainingWords[randomIndex];
      isEnglishToChinese = Math.random() > 0.5; // 随机选择出题模式
      const questionElement = document.getElementById("question");
      if (isEnglishToChinese) {
        questionElement.textContent = `请翻译：${currentWord.english}`;
      } else {
        questionElement.textContent = `请翻译：${currentWord.chinese}`;
      }
      document.getElementById("result").textContent = ""; // 清空结果
      document.getElementById("answer").value = ""; // 清空输入框
    }

    // 检查答案
    function checkAnswer() {
      const userAnswer = document.getElementById("answer").value.trim();
      const correctAnswer = isEnglishToChinese ? currentWord.chinese : currentWord.english;
      const resultElement = document.getElementById("result");

      if (userAnswer.toLowerCase() === correctAnswer.toLowerCase()) {
        resultElement.textContent = "正确！";
        score++;
      } else {
        resultElement.textContent = `错误！正确答案是：${correctAnswer}`;
      }

      // 从剩余单词中移除当前单词
      remainingWords = remainingWords.filter(word => word !== currentWord);

      setTimeout(() => {
        init(); // 1秒后出下一题
      }, 1000);
    }

    // 页面加载时初始化
    window.onload = init;
  </script>
</body>
</html>